<template>
  <!--  加油卡管理 -->
  <base-breadcrumb :title="$route.meta.title">
    <!-- 搜索 -->
    <searchData
      ref="searchData"
      :search-data="searchArr"
      @search="search"
    />
    <!-- 表格 -->
    <a-card :bordered="false">
      <!-- <title-name :title="$route.meta.title" /> -->
      <!-- v-if="post.code === 'BCACLGL' || post.code === 'BCACLGL'" -->
      <div class="mb12">
        <!-- 加油卡充值 -->
        
        <!-- 导出 -->
        <!-- <excel
          ref="exportAll"
          class="ml12"
          :file-name="`${post.name}_车辆加油卡账`"
          is-click-generate="false"
        >
          <a-button
            slot="excelBtn"
            type="primary"
            icon="download"
            :loading="loading"
            @click="exportAll"
          >
            导出
          </a-button>
        </excel> -->
      </div>
      <!-- 表格 -->
      <list-table
        ref="table"
        row-key="id"
        :columns="columns"
        :request="loadData"
        :alert="true"
        show-size-changer
        show-quick-jumper
        :export-config="{ use: true, select: `${post.name}_车辆加油卡账`, all: `${post.name}_车辆加油卡账` }"
        :statisticsConfig="{use: true, temp: statisticsTemp}"
      >
        <a-button
          slot="prefix"
          icon="pay-circle"
          type="primary"
          @click="handleManage(1)"
        >
          加油卡充值
        </a-button>
        <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
        <template
          slot="actions"
          slot-scope="text, record"
        >
          <a @click="handleManage(0, record.id)">查看</a>
        </template>
      </list-table>
    </a-card>
  </base-breadcrumb>
</template>

<script>
// import { STable } from '@/components' // 表格
import { carGasCard } from '@/api/office/vehicle/config' // api
import SelectCompanyAndProject from '@/components/Select/SelectCompanyAndProject' // 申请单位
import OrgTreeSelect from '@/components/OrgTreeSelect'
import BasePage from '@/views/basePage' // 基础配置

const searchArr = [
  // 搜索框
  {
    name: '单位',
    valueKey: 'searchQuery',
    type: OrgTreeSelect,
    attr: {
      isAutoSelectFirst: true
    }
  },
  // {
  //   name: '单位',
  //   valueKey: 'unitId',
  //   type: SelectCompanyAndProject
  // },
  {
    name: '充值日期',
    type: 'dateRange',
    value: 'time',
    attr: {
      rangeFormat: ['chargeStartTime', 'chargeEndTime']
    }
  },
  {
    name: '加油卡号',
    type: 'input',
    value: 'gasCardNumber'
  },
  {
    name: '车牌号',
    type: 'input',
    value: 'carNumber'
  }
]
const columns = [
  {
    title: '序号',
    width: 80,
    dataIndex: 'index',
    scopedSlots: { customRender: 'index' }
  },
  {
    title: '单位',
    ellipsis: true,
    dataIndex: 'unitName'
  },
  {
    title: '加油卡号',
    ellipsis: true,
    dataIndex: 'gasCardNumber'
  },
  {
    title: '充值金额（元）',
    ellipsis: true,
    dataIndex: 'chargeAmount'
  },
  {
    title: '车牌号',
    ellipsis: true,
    dataIndex: 'carNumber'
  },
  {
    title: '驾驶员',
    ellipsis: true,
    dataIndex: 'driver',
    customRender() {
      return arguments[1].driverName && arguments[1].phone ? arguments[1].driverName + ' ' + arguments[1].phone : '—'
    }
  },
  {
    title: '办公室负责人',
    ellipsis: true,
    dataIndex: 'officeHeadName'
  },
  {
    title: '充值日期',
    dataIndex: 'chargeTime'
  },
  {
    title: '操作',
    dataIndex: 'actions',
    width: '120px',
    fixed: 'right',
    align: 'center',
    scopedSlots: { customRender: 'actions' }
  }
]
export default {
  name:'a'+Date.now(),
  extends: new BasePage(),
  components: {
    // STable
  },
  data() {
    this.columns = columns
    this.searchArr = searchArr
    return {
      loading: false, // 导出loading
      queryParam: {}, // 查询参数
      loadData: (parameter) => {
        // if (!this.init) {
        //   return false
        // }
        this.getSummary()
        const requestParameters = Object.assign({}, parameter, { query: this.queryParam })
        return carGasCard.getList(requestParameters).then((res) => {
          return res
        })
      }, // 加载数据方法 必须为 Promise 对象
      summary: {}, // 统计
      init: false,
      post: {} //当前岗位
    }
  },
  mounted() {
    // 获取当前岗位
    this.post = this.$currentPost()
    // this.$refs.exportAll.tableToExcelFile(this.$refs.table, 0)
    this.$refs.searchData.form.setFieldsValue({
      unitId: this.post?.id,
      searchQuery: {
        _checked: this.$currentPost()?.id
      }
    })
    this.init = true
    this.search({
      unitId: this.post?.id,
      searchQuery: {
        _checked: this.$currentPost()?.id
      }
    })
  },
  methods: {
    /**
     * 统计
     */
    getSummary() {
      carGasCard.summary(Object.assign({}, this.queryParam)).then((res) => {
        if (res.data) {
          this.summary = res.data
        }
      })
    },
     statisticsTemp() {
          return (
            <span>
              <span>总充值金额：<a>{this.summary.chargeSumAmount || 0 }</a></span>
            </span>
          )
        },
    /**
     * 导出
     */
    exportAll() {
      this.loading = true
      let form = this.$refs.searchData.form.getFieldsValue()
      if (form.time) {
        form.chargeStartTime = this.$dateFormat(form.time[0], 'D')
        form.chargeEndTime = this.$dateFormat(form.time[1], 'D')
        delete form.time
      }
      carGasCard
        .getAllList(Object.assign({}, form))
        .then((res) => {
          this.loading = false
          if (res.data?.length > 0) {
            res.data.forEach((item, index) => {
              item.index = index + 1
              item.driver = item.driverName && item.phone ? item.driverName + item.phone : ''
            })
            this.$refs.exportAll.setDataAndGenerate(res.data)
            this.$message.success('导出成功')
          } else {
            this.$message.warning('没有数据可以导出')
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    /**
     * 搜索
     */
    search(value) {
      value && (this.queryParam = value)
      this.$refs.table.refresh(true)
    },
    /**
     * 操作栏
     */
    handleManage(editModel, id) {
      let query = {
        editModel,
        id
      }
      this.$router.push({
        name: '/vehicle/fuelCardEdit',
        query
      })
    }
  }
}
</script>
